@charset "utf-8";
@import "zdzreset";
@import "public";

body{
    background-color: #f3f4f6;
}

.header{
    display: flex;
//  position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    height: r(87px);
    background-color: #f7f7f7;
    span{
        width: r(213px);
        color: #333333;
        font-size: r(30px);
        line-height: r(87px);
    }
    span.DP{
        padding-left: r(19px);
    }
    span.Title{
        font-size: r(35px);
        text-align: center;
    }
    span.TG{
        text-align: right;
        padding-right: r(19px);
    }
}
.banner{
    position: relative;
    font-size: 0;
//  padding: r(87px) 0 0 0;
    .img-wrap{
        width: 100%;
        height: r(300px);
        background: url(../img/bg.png) no-repeat;
        background-size: 100%;
        text-align: center;
        .contant{
            transform: translate3d(0,r(100px),0);
            p{
                color: #fefefe;
                font-size: r(50px);
            }
            span{
                margin: r(23px) 0 0 0;
                color: #fefefe;
                font-size: r(24px);
            }
        }
    }
    .mes-list{
        position: absolute;
        bottom: 0;
        display: flex;
        width: 100%;
        height: r(100px);
        justify-content: space-around;
        div{
            width: r(213px);
            color: #fff;
            text-align: center;
            padding: r(22px) 0 0 0;
            background-color: rgba(0,0,0,0.3);
            p{
                display: block;
                height: inherit;
                font-size: r(24px);
            }
            span{
                font-size: r(24px);
            }
        }
    }
}
.btn-TJSP{
    width: 100%;
    .btn{
        display: block;
        width: r(600px);
        height: r(70px);
        background-color: #ffffff;
        font-size: r(28px);
        color: #e33030;
        margin: 0 auto;
        text-align: center;
        line-height: r(70px);
        margin-top: r(20px);
        margin-bottom: r(20px);
        border: 1px solid #e3e3e3;
        border-radius: 4px;
    }
    i{ 
        width: r(34px);
        height: r(36px);
        font-style: initial;
        font-size: r(24px);
    }
}
.btn-List{
    display: flex;
    width: 100%;
//  height: r(500px);
    justify-content: space-around;
    flex-wrap: wrap;
    padding-bottom: r(120px);
    .wrap{
        width: r(213px);
        height: r(250px);
        div{
            position: relative;
            height: 100%;
            text-align: center;
            border: 1px solid #eeeeee;
            background-color: #ffffff;
            img{
                width: r(82px);
//              height: r(80px);
                margin-top: 50%;
                transform: translate3d(0,-50%,0);
            }
            .icon-sey-talk-b{
                position: absolute;
                top: 20px;
                right: 30px;
                color: red;
            }
            p{
                font-size: r(24px);
                color: #999;
//              margin-bottom: r(52px);
                transform: translate3d(0,-50%,0);
            }
            .DDGL{
                margin-top: r(-12px);
            }
            .WXGN{
                margin-top: r(12px);
            }
            .KHGL{
                
            }
            .DPGL{
                margin-top: r(12px);
            }
            .SJTJ{
                margin-top: r(8px);
            }
        }
    }
}
.footer{
    display: flex;
    position: fixed;
    bottom: 0;
    z-index: 8;
    justify-content: space-around;
    width: 100%;
    height: r(114px);
    background-color: #fefefe;
    box-sizing: border-box;
    align-items: center;
    div{
        text-align: center;
        .iconfont{
            position: relative;
            display: block;
            font-size: r(42px);
            color: gray;
            span{
                font-size: r(20px);
                display: block;
            }
            .cir{
                position: absolute;
                top: 0;
                right: 0;
                width: r(20px);
                height: r(20px);
                font-size: r(15.12px);
                line-height: r(20px);
                background-color: red;
                border-radius: 50%;
                color: white;
            }
        }
        .select{
            color: red;
        }
    }
}
.test{
    display: none;
}

.TJSP_Mask{
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 999;
    height: 100%;
    width: 100%;;
    background-color: rgba(0,0,0,0.3);
    .btn_TJSP{
        position: absolute;
        bottom: 0;
        z-index: 9;
        width: 100%;
        height: r(310px);
        background-color: #fff;
        text-align: center;
        .top{
            border-bottom: 1px solid #e0e0e0;
            .green-cir{
                width: r(100px);
                height: r(100px);
                background-color: #82cf4f;
                border-radius: 50%;
                text-align: center;
                line-height: r(100px);
                margin: 0 auto;
                color: #ffffff;
                margin-top: r(29px);
                .icon-gift1{
                    font-size: r(60px);
                }
            }
            p{
                font-size: r(24px);
                color: #999;
                margin-top: r(20px);
                margin-bottom: r(30px);
            }
        }
        .btn-close{
            color: #333;
            font-size: r(35px);
            width: 100%;
            height: r(107px);
            background-color: #fff;
            border: 0;
            outline: none;
        }
    }
}
.TG_Mask{
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 9;
    height: 100%;
    width: 100%;
    transition: all 1s;
    background-color: rgba(0,0,0,0.3);
    .TG_list{
        position: absolute;
        bottom: 0;
        z-index: 99;
        .big-wrap{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 100%;
            height: r(716px);
            text-align: center;
            background-color: #fff;
            border-bottom: 1px solid #e0e0e0;
            .wrap{
                width: r(213px);
                div{
                    height: 100%;
                    margin-top: r(38px);
                    img{
                        height: r(145px);
                    }
                }
            }
        }
        .btn-close1{
            color: #333;
            font-size: r(35px);
            width: 100%;
            height: r(107px);
            background-color: #fff;
            border: 0;
            outline: none;
        }
    }
}

.liner{
    transition: all 3s;
//  transform: translate3d(0,100%,0);
    animation: Liner 3s ease-in;
}
@keyframe Liner{
    form{
        transform: translate3d(0,100%,0);
    }
    to{
        transform: translate3d(0,0,0);
    }
}
